<template>
  <div>
    <zm-panel :title="panelTitle" :visible.sync="value" @change="close">
      <zm-form
        label-width="80px"
        :model="form"
        :rules="formRule"
        ref="zmForm"
        size="small"
      >
      <zm-form-item label="所属公司" prop="companyId">
          <zm-data-select
          label-name="companyName"
          value-key="companyId"
          @change="companyChange"
            v-model="form.companyId"
            :list="companyList"
            class="w300"
          />
        </zm-form-item>
        <zm-form-item label="部门类型" prop="departmentType">
          <zm-data-select
            v-model="form.departmentType"
            :list="departmentTypeList"
            class="w300"
          />
        </zm-form-item>
        <zm-form-item
          label="上级部门"
          prop="pId"
          v-if="form.departmentType === '2'"
        >
        <!--  api="parentList"-->
          <zm-data-select v-model="form.pId" :list="departmentList" class="w300" />
        </zm-form-item>
        <zm-form-item label="部门名称" prop="name">
          <el-input
            v-model="form.name"
            :maxlength="20"
            clearable
            class="w300"
            placeholder="请输入部门名称,建议不超过20个字"
          />
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </zm-panel>
  </div>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import { departmentTypeList } from '../const'
import systemApartmentApis from '@/api/src/systemApartment'
export default {
  mixins: [panelMixin],
  props: {
    rowInfo: {
      type: Object,
      default () {
        return {}
      }
    },
    companyList: {
      type: Array
    }
  },
  data () {
    return {
      form: {
        companyId: '',
        departmentType: '',
        pId: '',
        name: ''
      },
      departmentTypeList,
      formRule: {
        companyId: [
          {
            required: true,
            message: '请选择所属公司'
          }
        ],
        departmentType: [
          {
            required: true,
            message: '请选择部门类型'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入部门名称'
          }
        ],
        pId: [
          {
            required: true,
            message: '请选择上级部门'
          }
        ]
      },
      departmentList: []
    }
  },
  computed: {
    panelTitle () {
      return this.rowInfo.id ? '编辑部门' : '新增部门'
    }
  },
  created () {
    // this.getDepartmentList()
    if (this.rowInfo.id) {
      this.getDetail()
    }
  },
  methods: {
    companyChange() {
      this.getDepartmentList()
    },
    async getDepartmentList () {
      // 获取上级部门列表
      const _res = await systemApartmentApis.parentList({
        companyId: this.form.companyId
      })
      this.departmentList = _res
    },
    async getDetail () {
      const _res = await systemApartmentApis.getInfo({ id: this.rowInfo.id })
      this.form = _res
    },
    async submit () {
      let _valid = false
      this.$refs.zmForm.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      if (this.rowInfo.id) {
        await systemApartmentApis.update({ ...this.form, id: this.rowInfo.id })
      } else {
        await systemApartmentApis.create(this.form)
      }
      this.$message.success('操作成功')
      this.$emit('after-save')
      this.close()
    }
  }
}
</script>
